<template>
  <div class="page-header-index-wide">

    <a-card :loading="loading" :bordered="false" :body-style="{padding: '0'}">
      <div class="salesCard">
        <a-tabs default-active-key="1" size="large" :tab-bar-style="{marginBottom: '24px', paddingLeft: '16px'}">
          <div class="extra-wrapper" slot="tabBarExtraContent">
            <j-dict-select-tag type="radioButton" v-model="dateTypeVal" dictCode="vueDateType" :trigger-change="true"
                               @change="handleDateTypeChange" style="margin-right: 20px;"/>
            <a-date-picker v-if="dateTypeVal === 'day'" :showToday="false" :style="{width: '156px'}"
                           @change="(date,dateString)=>{
                             requestInfo(dateString);
                           }"/>
            <a-month-picker v-if="dateTypeVal === 'month'" placeholder="请选择月份" :style="{width: '156px'}"
                            @change="(date,dateString)=>{
                             requestInfo(dateString);
                           }"/>
          </div>
          <a-tab-pane loading="true" tab="订单整体概况" key="1">
            <a-row>
              <a-col v-for="(item, index) in dataInfo" :span="3" style="margin-left: 20px;">
                <chart-card :bordered="true" :footer="false" :loading="loading" :title="item.title" :total="item.today">
                  <a-tooltip :title="item.tips" slot="action">
                    <a-icon type="info-circle-o" />
                  </a-tooltip>
                  <div v-if="item.percentage">
                    <trend style="margin-right: 16px;" v-if="item.percentage == 0">
                      <span slot="term">较前一{{ dateTypeVal === 'month' ? '月' : '日' }}</span>
                      -
                    </trend>
                    <trend flag="up" style="margin-right: 16px;" v-else-if="item.percentage >= 0">
                      <span slot="term">较前一{{ dateTypeVal === 'month' ? '月' : '日' }}</span>
                      {{ item.percentage }}%
                    </trend>
                    <trend flag="down" style="margin-right: 16px;" v-else>
                      <span slot="term">较前一{{ dateTypeVal === 'month' ? '月' : '日' }}</span>
                      {{ Math.abs(item.percentage) }}%
                    </trend>
                  </div>
                </chart-card>
              </a-col>
            </a-row>
          </a-tab-pane>
        </a-tabs>
      </div>
    </a-card>


    <a-card :loading="loading" :bordered="false" :body-style="{padding: '0'}">
      <div class="salesCard">
        <a-tabs @change="tabChange" default-active-key="1" size="large" :tab-bar-style="{marginBottom: '24px', paddingLeft: '16px'}">
          <div class="extra-wrapper" slot="tabBarExtraContent">
            <div class="extra-item">
              <a @click="changeDate(dateType.yesterday, null, null)">昨日</a>
              <a @click="changeDate(dateType.week, null, null)">近7天</a>
              <a @click="changeDate(dateType.month, null, null)">近30天</a>
              <a @click="changeDate(dateType.total, null, null)">总计</a>
            </div>
            <a-range-picker :style="{width: '256px'}" @change="customDateChoice"/>
          </div>
          <a-tab-pane loading="true" tab="订单笔数" key="1">
            <a-row>
              <a-col >
                <line-chart-multid :fields="statisticsFields" :dataSource="statistics"></line-chart-multid>
              </a-col>
            </a-row>
          </a-tab-pane>
          <a-tab-pane loading="true" tab="订单金额" key="2">
            <a-row>
              <a-col >
                <line-chart-multid :fields="statisticsAmountFields" :dataSource="statisticsAmount"></line-chart-multid>
              </a-col>
            </a-row>
          </a-tab-pane>
        </a-tabs>
      </div>
    </a-card>



  </div>
</template>

<script>
  import ChartCard from '@/components/ChartCard'
  import ACol from "ant-design-vue/es/grid/Col"
  import ATooltip from "ant-design-vue/es/tooltip/Tooltip"
  import LineChartMultid from '@/components/chart/LineChartMultid'
  import HeadInfo from '@/components/tools/HeadInfo.vue'
  import Trend from '@/components/Trend'
  import { getAction, httpAction } from '@/api/manage'

  export default {
    name: "IndexChart",
    components: {
      ATooltip,
      ACol,
      ChartCard,
      Trend,
      LineChartMultid,
      HeadInfo
    },
    data() {
      return {
        loading: true,
        center: null,
        tabKey: 1,
        dataInfo: [],
        statistics: [],
        statisticsFields: ['总订单数', '支付订单数', '退款订单数'],
        statisticsAmount: [],
        statisticsAmountFields: ['总下单金额', '支付金额', '退款金额'],
        dateType: {total: 0, yesterday: 1, today: 2, week: 3, month: 4, custom: 5},
        dateTypeVal: 'total',
      }
    },
    created() {
      setTimeout(() => {
        this.loading = !this.loading
      }, 1000)
      this.initLogInfo();
    },
    methods: {
      initLogInfo () {
        this.requestStatistics(this.dateType.week, null, null)
        this.requestInfo(null);
      },
      customDateChoice (range) {
        this.changeDate(this.dateType.custom, range[0].format('YYYY-MM-DD'), range[1].format('YYYY-MM-DD'));
      },
      changeDate(type, start, end){
        this.requestStatistics(type, start, end)
      },
      tabChange (key) {
        this.tabKey = key
      },
      requestStatistics (type, start, end) {
        getAction("/statistics/orderStatistics", { type: type, dayStart: start, dayEnd: end }).then(res => {
          if (res.success) {
            this.statistics = res.result.lineCountData
            this.statisticsAmount = res.result.linePriceData
          }
        })
      },
      handleDateTypeChange(e) {
        let type = e.target.value;
        this.dateTypeVal = type;
        if (type === 'total' || type === 'today') {
          this.requestInfo(null);
        }
      },
      requestInfo (dateString) {
        getAction("/statistics/orderInfo", { type: this.dateTypeVal, dateString: dateString }).then(res => {
          if (res.success) {
            this.dataInfo = res.result
          }
        })
      },
    }
  }
</script>

<style lang="less" scoped>
  .extra-wrapper {
    line-height: 55px;
    padding-right: 24px;

    .extra-item {
      display: inline-block;
      margin-right: 24px;

      a {
        margin-left: 24px;
      }
    }
  }

</style>